<template>
	<view class="index-page">
		<!-- Logo区域 -->
		<view class="logo-section">
			<view class="logo-placeholder">
				<text class="logo-text">PET BONE</text>
				<text class="logo-subtitle">宠物湿粮老用户回馈</text>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-list">
			<view class="menu-button" @tap="goToShop">
				<text class="menu-icon">🛒</text>
				<view class="menu-content">
					<text class="menu-title">商城购买</text>
					<text class="menu-desc">浏览商品立即下单</text>
				</view>
			</view>

			<view class="menu-button" @tap="goToOrder">
				<text class="menu-icon">📋</text>
				<view class="menu-content">
					<text class="menu-title">订单录入</text>
					<text class="menu-desc">输入订单号获取抽奖次数</text>
				</view>
			</view>

			<view class="menu-button" @tap="goToLottery">
				<text class="menu-icon">🎯</text>
				<view class="menu-content">
					<text class="menu-title">转盘抽奖</text>
					<text class="menu-desc">消耗次数参与抽奖</text>
				</view>
			</view>

			<view class="menu-button" @tap="goToExchange">
				<text class="menu-icon">🎁</text>
				<view class="menu-content">
					<text class="menu-title">免费兑换</text>
					<text class="menu-desc">累积次数兑换免费订单</text>
				</view>
			</view>
		</view>

		<!-- 活动说明 -->
		<view class="card activity-info">
			<view class="info-title">
				<text class="title-text">活动说明</text>
			</view>
			<view class="info-content">
				<text class="info-item">• 输入有效订单号可获得抽奖次数</text>
				<text class="info-item">• 每次抽奖消耗1次抽奖机会</text>
				<text class="info-item">• 累积足够次数可兑换免费订单</text>
				<text class="info-item">• 活动最终解释权归PET BONE所有</text>
			</view>
		</view>

		<!-- 订单录入弹窗 -->
		<view v-if="showOrderModal" class="order-modal-overlay" @tap="closeOrderModal">
			<view class="order-modal" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">订单录入</text>
					<text class="modal-close" @tap="closeOrderModal">✕</text>
				</view>
				<view class="modal-content">
					<view class="input-section">
						<input 
							v-model="orderNumber" 
							class="order-input" 
							placeholder="请输入订单号" 
							placeholder-style="color: #999;"
						/>
						<button class="paste-btn" @tap="getClipboardData">粘贴</button>
					</view>
					<button class="submit-btn" @tap="submitOrder">提交验证</button>
					<text class="modal-desc">输入有效订单号可获得1次抽奖机会</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
	import storageUtil from '@/utils/storage'

	// 响应式数据
	const lotteryCount = ref(0)
	const totalLotteryCount = ref(0)

	// 获取抽奖次数
	const getLotteryCount = async () => {
		try {
			// 这里应该调用后端API获取用户抽奖次数
			// const res = await api.getLotteryCount()
			// lotteryCount.value = res.data.count
			// totalLotteryCount.value = res.data.totalCount

			// 临时使用本地存储模拟
			lotteryCount.value = uni.getStorageSync('lotteryCount') || 0
			totalLotteryCount.value = uni.getStorageSync('totalLotteryCount') || 0
		} catch (error) {
			console.error('获取抽奖次数失败:', error)
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			})
		}
	}

	// 跳转到商城页面
	const goToShop = () => {
		uni.switchTab({
			url: '/pages/shop/shop'
		})
	}

	// 订单录入弹窗相关
	const showOrderModal = ref(false)
	const orderNumber = ref('')

	// 显示订单录入弹窗
	const goToOrder = () => {
		showOrderModal.value = true
	}

	// 获取剪切板内容
	const getClipboardData = async () => {
		try {
			const res = await uni.getClipboardData()
			if (res.data) {
				orderNumber.value = res.data
				uni.showToast({
					title: '已粘贴订单号',
					icon: 'success'
				})
			}
		} catch (error) {
			console.error('获取剪切板失败:', error)
			uni.showToast({
				title: '获取剪切板失败',
				icon: 'none'
			})
		}
	}

	// 关闭订单录入弹窗
	const closeOrderModal = () => {
		showOrderModal.value = false
		orderNumber.value = ''
	}

	// 提交订单验证
	const submitOrder = async () => {
		if (!orderNumber.value.trim()) {
			uni.showToast({
				title: '请输入订单号',
				icon: 'none'
			})
			return
		}

		try {
			uni.showLoading({
				title: '验证中...'
			})

			// 模拟服务器验证
			const isValid = await mockServerValidation(orderNumber.value)

			uni.hideLoading()

			if (isValid) {
				// 验证成功，增加抽奖次数
				lotteryCount.value += 1
				totalLotteryCount.value += 1

				// 保存到本地存储
				uni.setStorageSync('lotteryCount', lotteryCount.value)
				uni.setStorageSync('totalLotteryCount', totalLotteryCount.value)

				// 保存订单记录
				const orderHistory = uni.getStorageSync('orderHistory') || []
				orderHistory.push({
					orderNumber: orderNumber.value,
					date: new Date().toISOString(),
					status: 'success'
				})
				uni.setStorageSync('orderHistory', orderHistory)

				uni.showToast({
					title: '订单验证成功！获得1次抽奖机会',
					icon: 'success',
					duration: 2000
				})

				closeOrderModal()
			} else {
				uni.showToast({
					title: '订单号无效或已使用',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('订单验证失败:', error)
			uni.hideLoading()
			uni.showToast({
				title: '网络错误，请重试',
				icon: 'none'
			})
		}
	}

	// 模拟服务器验证
	const mockServerValidation = (orderNum) => {
		return new Promise((resolve) => {
			setTimeout(() => {
				// 模拟验证逻辑：订单号长度大于5且不在历史记录中
				const orderHistory = uni.getStorageSync('orderHistory') || []
				const isUsed = orderHistory.some(item => item.orderNumber === orderNum)
				const isValid = orderNum.length > 5 && !isUsed
				resolve(isValid)
			}, 1500)
		})
	}

	// 跳转到抽奖页面
	const goToLottery = () => {
		if (lotteryCount.value <= 0) {
			uni.showModal({
				title: '提示',
				content: '您当前没有抽奖次数，请先录入订单号获取抽奖机会',
				showCancel: false
			})
			return
		}
		uni.switchTab({
			url: '/pages/lottery/lottery'
		})
	}

	// 跳转到兑换页面
	const goToExchange = () => {
		uni.switchTab({
			url: '/pages/exchange/exchange'
		})
	}

	// 页面加载
	onLoad(() => {
		getLotteryCount()
	})

	// 页面显示
	onShow(() => {
		getLotteryCount()
	})

	// 页面卸载
	onUnload(() => {
		// 移除事件监听
		uni.$off('autoLoginSuccess')
	})
</script>

<style scoped>
	.index-page {
		/* background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%); */
		background: linear-gradient(180deg, #fff 0%, #fff 55%, #FFECB3 100%);
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	.logo-section {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 360rpx;
	}

	.logo-placeholder {
		width: 480rpx;
		height: 240rpx;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(255, 184, 0, 0.08);
		box-shadow: 0 12rpx 32rpx rgba(255, 184, 0, 0.2);
		border: 2rpx dashed rgba(255, 184, 0, 0.5);
	}

	.logo-text {
		font-size: 60rpx;
		font-weight: 900;
		color: #FF8F00;
		letter-spacing: 6rpx;
	}

	.logo-subtitle {
		margin-top: 12rpx;
		font-size: 26rpx;
		color: #FFB300;
	}

	.card {
		background: white;
		border-radius: 24rpx;
		padding: 24rpx;
		margin: 24rpx 24rpx 0 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(255, 184, 0, 0.15);
	}

	/* 菜单区域 */
	.menu-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 24rpx;
	}

	.menu-button {
		background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
		border-radius: 28rpx;
		padding: 40rpx 48rpx;
		box-shadow: 0 12rpx 32rpx rgba(255, 215, 0, 0.4);
		border: none;
		display: flex;
		align-items: center;
		gap: 32rpx;
		transition: all 0.3s ease;
		min-height: 140rpx;
		margin: 0 12rpx;
	}

	.menu-button:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.4);
	}

	.menu-icon {
		font-size: 56rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 20rpx;
		flex-shrink: 0;
	}

	.menu-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.menu-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		line-height: 1.2;
	}

	.menu-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.3;
		margin-top: 4rpx;
	}

	/* 活动说明卡片 */
	.activity-info {
		margin-top: 24rpx;
	}

	.info-title {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.title-text {
		font-size: 28rpx;
		font-weight: 900;
		color: #333;
	}

	.info-content {
		padding-left: 8rpx;
	}

	.info-item {
		display: block;
		font-size: 24rpx;
		color: #666;
		line-height: 1.8;
	}

	/* 登录弹窗 */
	.login-modal {
		width: 86vw;
		max-width: 640rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 24rpx;
		border-bottom: 1rpx solid #f2f2f2;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: 800;
		color: #333;
	}

	.modal-close {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f8fafc;
	}

	.close-text {
		font-size: 36rpx;
		color: #94a3b8;
	}

	.modal-content {
		padding: 24rpx;
	}
	/* 订单录入弹窗样式 */
	.order-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.order-modal {
		width: 600rpx;
		background: white;
		border-radius: 24rpx;
		box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
		overflow: hidden;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 40rpx;
		background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
	}

	.modal-close {
		font-size: 36rpx;
		color: #666;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-content {
		padding: 40rpx;
	}

	.input-section {
		display: flex;
		gap: 16rpx;
		margin-bottom: 32rpx;
	}

	.order-input {
		flex: 1;
		height: 88rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.order-input:focus {
		border-color: #ffd700;
	}

	.paste-btn {
		width: 120rpx;
		height: 88rpx;
		background: #f8f9fa;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		font-size: 26rpx;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.paste-btn:active {
		background: #e9ecef;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
		border: none;
		border-radius: 12rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn:active {
		transform: translateY(2rpx);
	}

	.modal-desc {
		font-size: 24rpx;
		color: #999;
		text-align: center;
		display: block;
	}
	
</style>